<template>
  <header class="top-header" :class="{ 'header-hidden': isHeaderHidden }">
    <div class="header-left">
      <div class="breadcrumb">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/dashboard' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>{{ currentTitle }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
    
    <div class="header-right">
      <!-- 移动端菜单按钮 -->
      <el-button 
        v-show="isMobile" 
        link 
        @click="toggleMobileMenu" 
        class="mobile-menu-btn"
      >
        <el-icon><Menu /></el-icon>
      </el-button>
      
             <!-- 搜索框 -->
       <div class="search-container" v-show="!isMobile">
         <el-input
           v-model="searchKeyword"
           placeholder="搜索功能..."
           clearable
           @keyup.enter="handleSearch"
           class="search-input"
         >
           <template #prefix>
             <el-icon><Search /></el-icon>
           </template>
         </el-input>
       </div>
      
      <!-- 通知图标 -->
      <div class="notification-container">
        <el-badge :value="notificationCount" :hidden="notificationCount === 0">
          <el-button link @click="showNotifications" class="notification-btn">
            <el-icon><Bell /></el-icon>
          </el-button>
        </el-badge>
      </div>
      
      <!-- 用户头像区域 -->
      <div class="header-user">
        <el-dropdown @command="handleUserCommand" trigger="click">
          <div class="user-dropdown-trigger">
            <el-avatar 
              size="default" 
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
              class="user-avatar"
            ></el-avatar>
            <span class="user-name" v-show="!isMobile">管理员</span>
            <el-icon class="dropdown-icon"><ArrowDown /></el-icon>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="profile">
                <el-icon><User /></el-icon>
                个人信息
              </el-dropdown-item>
              <el-dropdown-item command="account">
                <el-icon><UserFilled /></el-icon>
                账户设置
              </el-dropdown-item>
              <el-dropdown-item command="security">
                <el-icon><Lock /></el-icon>
                安全设置
              </el-dropdown-item>
              <el-dropdown-item command="preferences">
                <el-icon><Setting /></el-icon>
                偏好设置
              </el-dropdown-item>
              <el-dropdown-item command="system-settings" divided>
                <el-icon><Tools /></el-icon>
                系统设置
              </el-dropdown-item>
              <el-dropdown-item command="help">
                <el-icon><QuestionFilled /></el-icon>
                帮助中心
              </el-dropdown-item>
              <el-dropdown-item command="logout" divided>
                <el-icon><SwitchButton /></el-icon>
                退出登录
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </header>
</template>

<script>
import { ref, computed } from 'vue';
import { useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
import { 
  Menu, Search, Bell, ArrowDown, SwitchButton, User, UserFilled, 
  Lock, Setting, Tools, QuestionFilled
} from '@element-plus/icons-vue';

export default {
  name: 'Header',
  components: {
    Menu, Search, Bell, ArrowDown, SwitchButton, User, UserFilled, 
    Lock, Setting, Tools, QuestionFilled
  },
  props: {
    isMobile: {
      type: Boolean,
      default: false
    },
    isHeaderHidden: {
      type: Boolean,
      default: false
    },
    notificationCount: {
      type: Number,
      default: 3
    }
  },
  emits: ['toggle-mobile-menu', 'search', 'user-command'],
  setup(props, { emit }) {
    const route = useRoute();
    const searchKeyword = ref('');

    // 计算当前页面标题
    const currentTitle = computed(() => {
      const routeTitles = {
        '/dashboard': '仪表板',
        '/user/list': '用户列表',
        '/role': '角色管理',
        '/menu': '菜单管理',
        '/permission/control': '权限控制',
        '/system/settings': '系统设置',
        '/system/logs': '日志管理',
        '/article': '文章管理',
        '/file': '文件管理'
      };
      return routeTitles[route.path] || '首页';
    });

    // 切换移动端菜单
    const toggleMobileMenu = () => {
      emit('toggle-mobile-menu');
    };

    // 处理搜索
    const handleSearch = () => {
      if (searchKeyword.value.trim()) {
        emit('search', searchKeyword.value);
        ElMessage.success(`搜索: ${searchKeyword.value}`);
      }
    };

    // 显示通知
    const showNotifications = () => {
      ElMessage.info('通知功能开发中...');
    };

    // 处理用户命令
    const handleUserCommand = (command) => {
      emit('user-command', command);
      
      switch (command) {
        case 'profile':
          ElMessage.info('个人信息功能开发中...');
          break;
        case 'account':
          ElMessage.info('账户设置功能开发中...');
          break;
        case 'security':
          ElMessage.info('安全设置功能开发中...');
          break;
        case 'preferences':
          ElMessage.info('偏好设置功能开发中...');
          break;
        case 'system-settings':
          // 导航到系统设置页面
          window.location.href = '/system/settings';
          break;
        case 'help':
          ElMessage.info('帮助中心功能开发中...');
          break;
        case 'logout':
          ElMessage.success('退出登录成功');
          break;
      }
    };

    return {
      searchKeyword,
      currentTitle,
      toggleMobileMenu,
      handleSearch,
      showNotifications,
      handleUserCommand
    };
  }
};
</script>

<style scoped>
.top-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 260px;
  height: 60px;
  background: white;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  z-index: 999;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  width: calc(100vw - 260px);
}

.header-hidden {
  transform: translateY(-100%);
}

.header-left {
  display: flex;
  align-items: center;
  flex-shrink: 1;
  min-width: 0;
}

.breadcrumb {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.mobile-menu-btn {
  display: none;
  font-size: 18px;
  color: #6b7280;
}

.search-container {
  position: relative;
  flex-shrink: 1;
  min-width: 0;
}

.search-input {
  width: 300px;
  min-width: 200px;
  max-width: 400px;
  transition: all 0.3s ease;
}

.search-input :deep(.el-input__wrapper) {
  border-radius: 20px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
}

.search-input :deep(.el-input__wrapper:hover) {
  border-color: #d1d5db;
}

.search-input :deep(.el-input__wrapper.is-focus) {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.notification-container {
  position: relative;
  flex-shrink: 0;
}

.notification-btn {
  font-size: 18px;
  color: #6b7280;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.notification-btn:hover {
  background: #f3f4f6;
  color: #374151;
}

.header-user {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.user-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.user-dropdown-trigger:hover {
  background: #f3f4f6;
}

.user-avatar {
  border: 2px solid #e5e7eb;
}

.user-name {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  white-space: nowrap;
}

.dropdown-icon {
  font-size: 12px;
  color: #9ca3af;
  transition: transform 0.2s ease;
}

.user-dropdown-trigger:hover .dropdown-icon {
  transform: rotate(180deg);
}

/* 平板端样式 */
@media (max-width: 1024px) {
  .top-header {
    left: 220px;
    padding: 0 20px;
    z-index: 1001;
  }
  
  .search-input {
    width: 250px;
    min-width: 180px;
  }
  
  .header-right {
    gap: 12px;
  }
}

/* 移动端样式 - 简化版本 */
@media (max-width: 768px) {
  .top-header {
    left: 0;
    padding: 0 12px;
    height: 56px;
    z-index: 1000;
    width: 100vw;
  }
  
  .mobile-menu-btn {
    display: block;
    margin-right: 8px;
  }
  
  .search-input {
    width: 200px;
  }
  
  .user-name {
    display: none;
  }
  
  .header-right {
    gap: 8px;
  }
  
  .notification-btn {
    padding: 6px;
    font-size: 16px;
  }
  
  .user-dropdown-trigger {
    padding: 6px 8px;
  }
  
  .breadcrumb {
    font-size: 13px;
    max-width: 150px;
  }
}

/* 小屏幕适配 */
@media (max-width: 640px) {
  .top-header {
    padding: 0 8px;
    height: 52px;
  }
  
  .header-right {
    gap: 6px;
  }
  
  .mobile-menu-btn {
    padding: 6px;
    font-size: 16px;
    margin-right: 6px;
  }
  
  .notification-btn {
    padding: 5px;
    font-size: 15px;
  }
  
  .user-dropdown-trigger {
    padding: 5px 6px;
  }
  
  .user-avatar {
    width: 28px;
    height: 28px;
  }
  
  .breadcrumb {
    font-size: 12px;
    max-width: 120px;
  }
}

/* 超小屏幕适配 */
@media (max-width: 480px) {
  .top-header {
    padding: 0 6px;
    height: 48px;
  }
  
  .header-right {
    gap: 4px;
  }
  
  .mobile-menu-btn {
    padding: 4px;
    font-size: 14px;
    margin-right: 4px;
  }
  
  .notification-btn {
    padding: 4px;
    font-size: 14px;
  }
  
  .user-dropdown-trigger {
    padding: 4px 5px;
  }
  
  .user-avatar {
    width: 24px;
    height: 24px;
  }
  
  .breadcrumb {
    font-size: 11px;
    max-width: 100px;
  }
}
</style> 